<template>
  <div class="admin-dashboard">
    <!-- 高级背景效果 -->
    <div class="background-effects">
      <div class="gradient-orbs">
        <div class="orb orb-1"></div>
        <div class="orb orb-2"></div>
        <div class="orb orb-3"></div>
      </div>
      <div class="grid-pattern"></div>
    </div>

    <!-- 侧边栏 -->
    <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
      <div class="sidebar-header">
        <div class="logo">
          <div class="logo-icon">
            <div class="icon-shape">
              <div class="fitness-symbol">
                <div class="weight-circle"></div>
                <div class="energy-wave"></div>
                <div class="motion-line"></div>
              </div>
            </div>
          </div>
          <span class="logo-text">FitPro Admin</span>
        </div>
      </div>

      <nav class="sidebar-nav">
        <router-link
            v-for="item in mainMenuItems"
            :key="item.path"
            :to="item.path"
            class="nav-item"
            :class="{ active: $route.path === item.path }"
        >
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </router-link>

        <!-- 消息管理子菜单 -->
        <div class="submenu-container">
          <div class="submenu-header" @click="toggleMessageSubmenu" :class="{ active: isMessageSubmenuActive }">
            <i class="fa fa-bell"></i>
            <span>消息管理</span>
            <i class="fa fa-chevron-down submenu-arrow" :class="{ rotated: messageSubmenuOpen }"></i>
          </div>
          <div class="submenu-items" v-show="messageSubmenuOpen || sidebarCollapsed">
            <router-link
                to="/admin/dashboard/announce-publish"
                class="submenu-item"
                :class="{ active: $route.path === '/admin/dashboard/announce-publish' }"
            >
              <i class="fa fa-bullhorn"></i>
              <span>发布公告</span>
            </router-link>
            <router-link
                to="/admin/dashboard/announce-list"
                class="submenu-item"
                :class="{ active: $route.path === '/admin/dashboard/announce-list' }"
            >
              <i class="fa fa-list"></i>
              <span>公告列表</span>
            </router-link>
          </div>
        </div>

        <!-- 退出登录 -->
        <div class="nav-item logout-item" @click="handleLogout">
          <i class="fa fa-sign-out"></i>
          <span>退出登录</span>
        </div>
      </nav>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 顶部导航 -->
      <header class="admin-header">
        <div class="header-left">
          <button class="menu-toggle" @click="toggleSidebar">
            <i class="fa fa-bars"></i>
          </button>
          <h1 class="page-title">{{ currentPageTitle }}</h1>
        </div>
        <div class="header-right">
          <div class="user-menu">
            <span class="user-name">管理员</span>
            <div class="user-avatar">
              <i class="fa fa-user-circle"></i>
            </div>
          </div>
        </div>
      </header>
      <!-- 页面内容 -->
      <div class="content-area">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default {
  name: 'AdminDashboard',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const sidebarCollapsed = ref(false)
    const messageSubmenuOpen = ref(false) // 默认不展开

    const mainMenuItems = [
      { name: '用户管理', path: '/admin/dashboard/users', icon: 'fa fa-users' },
      { name: '教练管理', path: '/admin/dashboard/coaches', icon: 'fa fa-user-md' },
      { name: '课程管理', path: '/admin/dashboard/courses', icon: 'fa fa-calendar' },
      { name: '会员卡管理', path: '/admin/dashboard/member-cards', icon: 'fa fa-credit-card' },
      { name: '预约管理', path: '/admin/dashboard/reservations', icon: 'fa fa-list-alt' }
    ]

    const allMenuItems = [
      ...mainMenuItems,
      { name: '发布公告', path: '/admin/dashboard/announce-publish', icon: 'fa fa-bullhorn' },
      { name: '公告列表', path: '/admin/dashboard/announce-list', icon: 'fa fa-list' }
    ]

    const currentPageTitle = computed(() => {
      const item = allMenuItems.find(item => item.path === route.path)
      return item ? item.name : '后台管理'
    })

    const isMessageSubmenuActive = computed(() => {
      return route.path === '/admin/dashboard/announce-publish' ||
          route.path === '/admin/dashboard/announce-list'
    })

    const toggleSidebar = () => {
      sidebarCollapsed.value = !sidebarCollapsed.value
    }

    const toggleMessageSubmenu = () => {
      messageSubmenuOpen.value = !messageSubmenuOpen.value
    }

    const handleLogout = () => {
      // 清除管理员登录信息
      localStorage.removeItem('adminToken')
      localStorage.removeItem('adminInfo')
      localStorage.removeItem('adminRemember')

      // 跳转到后台登录页面
      router.replace('/admin/login')
    }

    return {
      mainMenuItems,
      currentPageTitle,
      sidebarCollapsed,
      messageSubmenuOpen,
      isMessageSubmenuActive,
      toggleSidebar,
      toggleMessageSubmenu,
      handleLogout
    }
  }
}
</script>

<style scoped>
.admin-dashboard {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  overflow: hidden;
  position: relative;
}

/* 高级背景效果 */
.background-effects {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.gradient-orbs {
  position: relative;
  width: 100%;
  height: 100%;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  animation: float 8s ease-in-out infinite;
}

.orb-1 {
  width: 400px;
  height: 400px;
  top: 5%;
  left: 5%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  animation-delay: 0s;
}

.orb-2 {
  width: 350px;
  height: 350px;
  top: 70%;
  right: 10%;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  animation-delay: 2s;
}

.orb-3 {
  width: 300px;
  height: 300px;
  bottom: 10%;
  left: 15%;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  animation-delay: 4s;
}

.grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.3;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-30px) scale(1.05); }
}

/* 侧边栏样式 - 固定不动 */
.sidebar {
  width: 280px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(15px);
  color: white;
  transition: all 0.3s ease;
  flex-shrink: 0;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  z-index: 1000;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar.collapsed {
  width: 80px;
}

.sidebar.collapsed .logo-text {
  display: none;
}

.sidebar.collapsed .nav-item span,
.sidebar.collapsed .submenu-header span {
  display: none;
}

.sidebar.collapsed .submenu-arrow {
  display: none;
}

.sidebar-header {
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* 艺术感图标样式 */
.logo-icon {
  width: 40px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-shape {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: float-icon 3s ease-in-out infinite;
}

.fitness-symbol {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 重量圆圈 */
.weight-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border: 2px solid;
  border-color: #667eea;
  border-radius: 50%;
  background: conic-gradient(
      from 0deg,
      transparent 0deg 180deg,
      rgba(102, 126, 234, 0.3) 180deg 360deg
  );
  animation: rotate-circle 8s linear infinite;
}

.weight-circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #764ba2 0%, #667eea 100%);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(118, 75, 162, 0.5);
}

/* 能量波纹 */
.energy-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  border: 1.5px solid;
  border-color: rgba(102, 126, 234, 0.3);
  border-radius: 50%;
  animation: pulse-wave 2s ease-out infinite;
}

.energy-wave::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border: 1px solid;
  border-color: rgba(118, 75, 162, 0.2);
  border-radius: 50%;
  animation: pulse-wave 2s ease-out infinite 0.5s;
}

/* 运动线条 */
.motion-line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
}

.motion-line::before,
.motion-line::after {
  content: '';
  position: absolute;
  background: linear-gradient(90deg, transparent, #667eea, transparent);
  height: 1.5px;
  border-radius: 1px;
}

.motion-line::before {
  top: 7px;
  left: 0;
  width: 100%;
  transform: rotate(45deg);
  animation: shine-line 3s ease-in-out infinite;
}

.motion-line::after {
  bottom: 7px;
  left: 0;
  width: 100%;
  transform: rotate(-45deg);
  animation: shine-line 3s ease-in-out infinite 1.5s;
}

/* 动画定义 */
@keyframes float-icon {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-3px) rotate(3deg);
  }
}

@keyframes rotate-circle {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes pulse-wave {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
  }
}

@keyframes shine-line {
  0%, 100% {
    opacity: 0.3;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.5), transparent);
  }
  50% {
    opacity: 1;
    background: linear-gradient(90deg, transparent, #667eea, transparent);
  }
}

.logo-text {
  font-size: 1.2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: opacity 0.3s ease;
}

.sidebar-nav {
  padding: 1rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.5rem;
  color: #cbd5e0;
  text-decoration: none;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
  cursor: pointer;
  margin: 0.2rem 0;
  position: relative;
  overflow: hidden;
}

.nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s ease;
}

.nav-item:hover::before {
  left: 100%;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
  border-left-color: #667eea;
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
  color: #f6ad55;
  border-left-color: #f6ad55;
  box-shadow: inset 0 0 15px rgba(102, 126, 234, 0.3);
}

.nav-item i {
  width: 20px;
  text-align: center;
  font-size: 1.1rem;
}

/* 子菜单样式 */
.submenu-container {
  margin: 0.5rem 0;
}

.submenu-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.5rem;
  color: #cbd5e0;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
  position: relative;
  overflow: hidden;
}

.submenu-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s ease;
}

.submenu-header:hover::before {
  left: 100%;
}

.submenu-header:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
}

.submenu-header.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
  color: #667eea;
  border-left-color: #667eea;
  box-shadow: inset 0 0 10px rgba(102, 126, 234, 0.3);
}

.submenu-arrow {
  margin-left: auto;
  transition: transform 0.3s ease;
  font-size: 0.8rem;
}

.submenu-arrow.rotated {
  transform: rotate(180deg);
}

.submenu-items {
  padding-left: 2.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.submenu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  color: #a0aec0;
  text-decoration: none;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  margin: 0.1rem 0;
  border-radius: 0 4px 4px 0;
  position: relative;
  overflow: hidden;
}

.submenu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transition: left 0.5s ease;
}

.submenu-item:hover::before {
  left: 100%;
}

.submenu-item:hover {
  background-color: rgba(255, 255, 255, 0.03);
  color: white;
}

.submenu-item.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
  color: #667eea;
  border-left-color: #667eea;
  box-shadow: inset 0 0 8px rgba(102, 126, 234, 0.2);
}

.submenu-item i {
  width: 16px;
  text-align: center;
  font-size: 0.9rem;
}

.logout-item {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem;
  color: #e53e3e;
}

.logout-item:hover {
  background-color: rgba(229, 62, 62, 0.1);
  color: #fc8181;
  border-left-color: #e53e3e;
}

/* 主内容区样式 - 深色主题 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: transparent;
  margin-left: 280px;
  transition: margin-left 0.3s ease;
  height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.sidebar.collapsed + .main-content {
  margin-left: 80px;
}

.admin-header {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(15px);
  padding: 1rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.menu-toggle {
  background: rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.3);
  font-size: 1.2rem;
  color: #cbd5e0;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.menu-toggle:hover {
  background: rgba(102, 126, 234, 0.25);
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.3);
  transform: translateY(-1px);
  color: white;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  background: linear-gradient(135deg, #f8fafc 0%, #cbd5e0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.user-menu:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.user-name {
  color: #e2e8f0;
  font-weight: 600;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.content-area {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
  background: transparent;
  position: relative;
  z-index: 1;
}

/* 数据卡片样式 - 深色主题 */
.card-content h3 {
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-value {
  color: #f8fafc;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

.card-trend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  width: fit-content;
}

.card-trend.positive {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.card-trend.negative {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* 表格容器样式 - 深色主题 */
.table-container {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.4);
}

.table-header h3 {
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.data-table th {
  background: rgba(15, 23, 42, 0.4);
  color: #cbd5e0;
  font-weight: 600;
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-table td {
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  font-weight: 500;
}

.data-table tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* 通用卡片样式 - 深色主题 */
.data-card {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.data-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  border-color: rgba(102, 126, 234, 0.3);
}

/* 滚动条样式 */
.sidebar-nav::-webkit-scrollbar,
.content-area::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track,
.content-area::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb,
.content-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover,
.content-area::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 80px;
    transform: translateX(-100%);
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .logo-text {
    display: none;
  }

  .nav-item span,
  .submenu-header span {
    display: none;
  }

  .submenu-arrow {
    display: none;
  }

  .main-content {
    margin-left: 0;
    width: 100%;
  }

  .admin-header {
    padding: 1rem;
  }

  .content-area {
    padding: 1rem;
  }

  .user-name {
    display: none;
  }
}
</style>